<template>
	<view class="qrcode-container">
		<uv-toast ref="toast"></uv-toast>

		<!-- 加载状态 -->
		<view class="loading-container" v-if="loading">
			<uv-loading mode="circle" size="28"></uv-loading>
			<text>加载中...</text>
		</view>

		<!-- 主要内容区域 -->
		<block v-else>
			<!-- 商家信息卡片 -->
			<view class="merchant-card">
				<image class="merchant-image" :src="shopInfo.image || '/static/lyf.jpg'" mode="aspectFill"></image>
				<view class="merchant-info">
					<text class="shop-name">{{ shopInfo.name }}</text>
					<text class="merchant-name">{{ shopInfo.merchantName }}</text>
					<view class="address">
						<uni-icons type="location" size="16"></uni-icons>
						<text>{{ shopInfo.province }}{{ shopInfo.city }}{{ shopInfo.district }}{{ shopInfo.street }}</text>
					</view>
				</view>
			</view>

			<!-- 二维码展示区 -->
			<view class="qrcode-section">
				<view class="qrcode-wrapper">
					<uv-qrcode ref="qrcode" :value="qcValue" :options="qrcodeOptions"></uv-qrcode>
				</view>
				<button class="save-btn" @tap="saveQRCode">保存二维码</button>
			</view>

			<!-- 详细信息列表 -->
			<view class="detail-list">
				<view class="detail-item">
					<text class="label">营业时间</text>
					<text class="value">{{shopInfo.openingHours || '24小时营业'}}</text>
				</view>
				<view class="detail-item">
					<text class="label">联系电话</text>
					<text class="value phone" @tap="makePhoneCall">{{shopInfo.phone}}</text>
				</view>
				<view class="detail-item">
					<text class="label">店铺介绍</text>
					<text class="value description">{{shopInfo.des || '暂无店铺介绍'}}</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				qcValue: '',
				shopInfo: {
					id: '',
					name: '',
					merchantName: '',
					street: '',
					director: '',
					phone: '',
					province: '',
					city: '',
					district: '',
					des: '',
					openingHours: '',
					status: 1,
					image: '',
					createTime: ''
				},
				qrcodeOptions: {
					size: 300,
					useDynamicSize: false,
					errorCorrectLevel: 'Q',
					margin: 10,
					areaColor: "#fff",
					backgroundColor: "#fff",
					foregroundImageSrc: '/static/lyf.jpg'
				}
			}
		},

		async onLoad(options) {
			try {
				this.loading = true;
				// 获取商家信息
				await this.getShopInfo(options.id);
				// 获取二维码配置域名
				await this.fetchQcValue();
			} catch (error) {
				this.showToast('加载失败，请重试', 'error', 2000);
			} finally {
				this.loading = false;
			}
		},

		methods: {
			showToast(msg, type, duration) {
				this.$refs.toast.show({
					message: msg,
					type: type,
					duration: duration,
				})
			},

			async getShopInfo(id) {
				try {
					const info = await this.$http.post(`/auth/merchant/info`);
					if (info) {
						this.shopInfo = info;
					} else {
						throw new Error('获取商家信息失败');
					}
				} catch (error) {
					console.error('获取商家信息失败:', error);
					throw error;
				}
			},

			async fetchQcValue() {
				try {
					const data = await this.$http.get(`/sys/merchant/qrc`);
					if (data) {
						this.qcValue = `${data}/merchantId=${this.shopInfo.id}`;
					} else {
						throw new Error('生成二维码失败');
					}
				} catch (error) {
					console.error('生成二维码失败:', error);
					throw error;
				}
			},

			async saveQRCode() {
				try {
					// 获取二维码组件实例
					const qrcode = this.$refs.qrcode;
					if (!qrcode) {
						throw new Error('二维码组件未加载');
					}

					// 获取二维码图片临时路径
					const tempFilePath = await qrcode.toTempFilePath();

					// 保存图片到相册
					await uni.saveImageToPhotosAlbum({
						filePath: tempFilePath
					});

					this.showToast('保存成功', 'success', 1500);
				} catch (error) {
					console.error('保存二维码失败', error);
					if (error.errMsg.includes('auth deny')) {
						this.showToast('请授权保存图片权限', 'warning', 2000);
					} else {
						this.showToast('保存失败，请重试', 'error', 2000);
					}
				}
			},

			makePhoneCall() {
				if (!this.shopInfo.phone) {
					this.showToast('暂无联系电话', 'warning', 1500);
					return;
				}

				uni.makePhoneCall({
					phoneNumber: this.shopInfo.phone,
					fail: () => {
						this.showToast('取消拨打', 'default', 500);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'create_qccode.scss';
</style>